<!DOCTYPE html>
<html lang="en" ng-app="app">
    <head>
        <meta charset="UTF-8">
        <title ng-bind="title"></title>
        <link rel="stylesheet" href="../../style/css/bootstrap.css">
        <link rel="stylesheet" href="../../style/css/matrix-style.css">
        <link rel="stylesheet" href="pagination.css">
        <script src="../../../node_modules/angular/angular.js"></script>
        <script src="../../a.ui.js"></script>
        <script src="pagination.js"></script>
        <script>
            var app = angular.module('app', ['a.ui']);
            app.run(function ($rootScope) {
                $rootScope.title = 'Pagination';
                $rootScope.pageChange = function () {
                    console.log('page change', $rootScope.page);
                };
            });
        </script>
    </head>
    <body>
        <div class="container">
            <h1 class="text-center" ng-bind="title"></h1>
            <label class="label label-info">不含页码:</label>
            <a-pagination ng-model="page" ng-change="pageChange()"></a-pagination>

            <label class="label label-info">不含页码, 有第一页及最后一页:</label>
            未配置 <code>total-page</code> 时点击最后一页就等于点击下一页
            <a-pagination ng-model="page" first-text="First" last-text="Last"></a-pagination>

            <label class="label label-info">含有页码:</label>
            <a-pagination ng-model="page" total-page="16"></a-pagination>

            <label class="label label-info">含有页码, 有第一页及最后一页:</label>
            <a-pagination ng-model="page" total-page="3" first-text="First" last-text="Last"></a-pagination>

            <label class="label label-info">last 设置:</label>
            <label><input type="checkbox" ng-model="last">当前页属于最后一页</label>
            <a-pagination ng-model="page" first="first" last="last" first-text="First" last-text="Last"></a-pagination>
            <p>
                <button class="btn btn-primary btn-sm" ng-click="page=2">设为第2页</button>
            </p>
            <label>选择的页码: </label><b ng-bind="page"></b>
        </div>
    </body>
</html>